<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="./css/reset.css">
		<link rel="stylesheet" href="./css/userCenter.css">
		<link rel="icon" href="./icon/title_vagetable.png">
		<title>个人中心页面</title>
		<script src="./js/axios.min.js"></script>
		<script src="./js/axios.config.js"></script>
	</head>

	<body>
		<header>
			<img class="bg" src="./img/personalCenter/bg-img.jpg" alt="">
			<div class="infomationCard">
				<div class="avatar">
					<img src="" alt="">
					<div class="nickname"></div>
				</div>
				<ul class="infoList">
					<li class="collection">
						<div class="detail">15</div>
						<div class="name">收藏</div>
					</li>
					<li class="attention">
						<div class="detail">31</div>
						<div class="name">关注品牌</div>
					</li>
				</ul>
			</div>
		</header>
		<div class="order card">
			<div class="top">
				<div class="title">我的订单</div>
				<div class="all">全部订单<img src="./img/shippingAddress/back.png" alt=""></div>
			</div>
			<ul class="list">
				<li onclick="location.href='./orders.html?id=0'">
					<img src="./img/personalCenter/icon-1.png" alt="">
					<div class="name">待付款</div>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-2.png" alt="">
						<div class="name">待发货</div>
					</a>
				</li>
				<li onclick="location.href='./orders.html?id=2'">
					<img src="./img/personalCenter/icon-3.png" alt="">
					<div class="name">待收货</div>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-4.png" alt="">
						<div class="name">待评价</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-5.png" alt="">
						<div class="name">售后</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="asset card">
			<div class="top">
				<div class="title">我的资产</div>
			</div>
			<ul class="list">
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-6.png" alt="">
						<div class="name">优惠券</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-7.png" alt="">
						<div class="name">钱包</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-8.png" alt="">
						<div class="name">D币</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-9.png" alt="">
						<div class="name">红包</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="tool card">
			<div class="top">
				<div class="title">工具</div>
			</div>
			<ul class="list">
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-10.png" alt="">
						<div class="name">会员中心</div>
					</a>
				</li>
				<li>
					<a href="./address_list.html">
						<img src="./img/personalCenter/icon-11.png" alt="">
						<div class="name">收货地址</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-12.png" alt="">
						<div class="name">售后&客服</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-13.png" alt="">
						<div class="name">设置</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-14.png" alt="">
						<div class="name">入驻合作</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-15.png" alt="">
						<div class="name">反馈&投诉</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-16.png" alt="">
						<div class="name">商品报告</div>
					</a>
				</li>
				<li>
					<a href="#">
						<img src="./img/personalCenter/icon-17.png" alt="">
						<div class="name">关于我们</div>
					</a>
				</li>
			</ul>
		</div>
		<div class="tabbar">
			<ul>
				<li onclick="location.assign('./index.html')">
					<div class="icon"><img src="./img/tabbar/tabbar1.png" alt=""></div>
					<div class="title">首页</div>
				</li>
				<li onclick="location.assign('./optimization.html')">
					<div class="icon"><img src="./img/tabbar/tabbar2.png" alt=""></div>
					<div class="title">优选</div>
				</li>
				<li onclick="location.assign('./classify.html')">
					<div class="icon"><img src="./img/tabbar/tabbar3.png" alt=""></div>
					<div class="title">分类</div>
				</li>
				<li onclick="location.assign('./shoppingCar.html')">
					<div class="icon"><img src="./img/tabbar/tabbar4.png" alt=""></div>
					<div class="title">购物车</div>
				</li>
				<li>
					<div class="icon"><img src="./img/tabbar/tabbar5-active.png" alt=""></div>
					<div class="title">我的</div>
				</li>
			</ul>
		</div>
		<script>
			//获取用户资料
			axios.get('/user/info')
				.then((res) => {
					console.log(res)
					if (res.status) {
						// 更新DOM
						document.querySelector('.avatar').innerHTML = `
						<img src="${res.data.avatar}" alt="">
						<div class="nickname">${res.data.nickname}</div>
					`
					}
				})
		</script>
	</body>

</html>
